<template>
  <div class="content">
    <!-- <HeaderIndex :showBack="false" ></HeaderIndex> -->
    <MovieNav></MovieNav>
    <div class="content-top">
      <p class="film">近期最受期待</p>
      <div class="movie-con">
        <div
          class="movie-content"
          v-for="(v, i) in arr"
          :key="v.id"
          @click="fun(v.id)"
        >
          <div class="movie-picture">
            <img :src="v.img | fliterImg" />
            <span class="rated"
              >{{ v.wish }}<span class="rated-score">想看</span></span
            >
            <div class="toggle-wish" @click.stop="handeClick(i)">
              <span
                :class="[redIndex.indexOf(i) > -1 ? 'redHeart' : 'whiteHeart']"
              >
              </span>
            </div>
          </div>

          <h3>{{ v.nm }}</h3>
          <p class="date">{{ v.comingTitle }}</p>
        </div>
      </div>
    </div>
    <!-- 中间 -->
    <div class="space"></div>
    <!-- //下面 -->

    <div class="main-block" v-for="v in arr1" :key="v.id" @click="funb(v.id)">
      <p class="top">{{ v.comingTitle }}</p>
      <div class="message">
        <div class="main-picture">
          <img :src="v.img | fliterImg" />
        </div>
        <div class="wrap">
          <div class="column">
            <div class="box-flex">
              <h2 class="title">{{ v.nm }}</h2>
              <span class="version"></span>
            </div>
            <div class="detail">
              <div class="score">
                <span class="score-suffix">{{ v.wish }} </span>
                <span class="grade">人想看</span>
              </div>
              <div class="actor">主演: {{ v.star }}</div>
              <div class="show-info">{{ v.showinfo }}</div>
            </div>
          </div>
        </div>
        <div class="ticket1">
          <div
            class="ticket"
            :style="{ background: v.showst == '1' ? '#faaf00' : '#3c9fe6' }"
          >
            {{ v.showst == "1" ? "想看" : "预售" }}
          </div>
        </div>
      </div>
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script>
import getLink from "@/api/getLink.js";
import { Toast } from "vant";
Toast.setDefaultOptions({ duration: 1000 });
export default {
  data() {
    return {
      redIndex: [], //为红色的dom下标
      arr: [],
      arr1: [],
    };
  },

  mounted() {
    getLink("/apidl/movie/dy").then((res) => {
      this.arr = res.data;
      this.arr.forEach((item) => {
        item.showWhite = true;
      });
    });
    getLink("/apidl/movie/dy").then((res) => {
      this.arr1 = res.data;
    });
  },

  methods: {
    handeClick(index) {
      let arrIndex = this.redIndex.indexOf(index);
      if (arrIndex > -1) {
        this.redIndex.splice(arrIndex, 1);
        Toast.success("已取消想看");
      } else {
        this.redIndex.push(index);
        Toast.success("已标记想看");
      }
    },
    fun(text) {
      this.$router.push({ path: "/xiangqing", query: { dd: text } });
    },
    funb(matter) {
      this.$router.push({ path: "/xiangqing", query: { dd: matter } });
    },
  },
};
</script>

<style scoped>
::-webkit-scrollbar {
  width: 0;
}
.content {
  font-size: 0.25rem;
}
.content-top {
  width: 100%;
  background: #fff;
}
.film {
  padding-left: 0.3rem;
  font-size: 0.3rem;
  padding-top: 0.2rem;
}

.movie-content {
  margin-right: 0.3rem;
  margin-top: 0.3rem;
}
.movie-picture {
  position: relative;
  margin-right: 0.1rem;
}
.movie-picture img {
  width: 1.8rem;
  height: 2.2rem;
}

.movie-picture .rated {
  position: absolute;
  top: 1.8rem;
  left: 6%;
  color: #faaf00;
  font-weight: 700;
}
.movie-con {
  display: flex;
  justify-content: space-between;
  overflow-x: auto;
  margin-left: 0.3rem;
}
.toggle-wish {
  width: 0.5rem;
  line-height: 0.5rem;
  background: rgba(61, 63, 71, 0.6);
  text-align: center;
  border-bottom-right-radius: 0.1rem;
  position: absolute;
  top: 0;
  left: 0;
}
/* .toggle-wish span img{
    width: 0.2rem;
  height: 0.2rem;
} */
.toggle-wish span {
  display: inline-block;
  width: 0.2rem;
  height: 0.2rem;
  background-size: 100%;
  background-repeat: no-repeat;
}
.whiteHeart {
  background-image: url(../../../public/images/heart.png);
}
.redHeart {
  background-image: url(../../../public/images/redheart.png);
}
.movie-content h3 {
  width: 1.5rem;
  margin-top: 0.1rem;
  font-size: 0.26rem;
  font-weight: 800;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* padding-left: 0.3rem; */
}
.space {
  height: 0.2rem;
  color: #f5f5f5;
}
.message {
  padding-left: 0.3rem;
  padding-top: 0.2rem;
  display: flex;
  justify-content: space-between;
  position: relative;
  background: #fff;
  padding-bottom: 0.2rem;
  /* background: #fff; */
}
.top {
  padding: 0.3rem 0 0 0.3rem;
  font-size: 0.3rem;
  background: #fff;
}
.main-picture img {
  width: 1.5rem;
  height: 1.87rem;
  padding-bottom: 0.2rem;
}

.wrap {
  width: 4.3rem;
  margin-left: 0.2rem;
  border-bottom: 1px solid #eaeaea;
}
.score {
  padding-top: 0.2rem;
}

.actor {
  width: 100%;
  padding: 0.08rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.box-flex h2 {
  color: #333;
  font-weight: 700;
}
.detail {
  color: #666666;
}
.score-suffix {
  color: #faaf00;
  font-size: 0.3rem;
  font-weight: 700;
}
/* .grade {
  color: #faaf00;
  font-size: 0.3rem;
} */
.ticket1 {
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 0.2rem;
}
.ticket {
  margin-right: 0.2rem;
  margin-top: 0.4rem;

  background: red;
  width: 1rem;
  height: 0.6rem;
  color: white;
  text-align: center;
  border-radius: 14%;
  line-height: 0.6rem;
  font-size: 0.25rem;
}
.bottom {
  height: 1rem;
}
</style>